<template>
  <div id="login">
    <button id="register"
            class="el-icon-edit-outline"
            @click="register"><small><small><small> 注册</small></small></small>
    </button>
    <font style="margin-left:33% ; color:black; font-size: 300%;"><b>悦生活</b></font><br>
    <font style="margin-left:45% ; color:black; font-size: 150%;"><b>————越生活，悦生活</b></font>
    <div id="canves">
      <font id="mintext">用户名：</font>
      <input type="text"
             id="account"
             autocomplete="off"><br>
      <font id="mitext">密码：</font>
      <input type="password"
             id="password"><br>
      <el-button id="loginbutton"
                 @click='login'
                 type="primary"
                 plain>Login</el-button>
    </div>
  </div>
</template>

<script>
import http from '../axios_config'

export default {

  name: 'Login',
  mounted () {
    http.post("http://192.168.11.18:8080/user/logined").then(res => {
      if (res.data.state == "SUCCESS") {
        this.$emit("component", 1);
      }
    });
  },
  methods: {
    login () {
      let account = document.getElementById('account').value;
      let password = document.getElementById('password').value;
      http.post("http://192.168.11.18:8080/user/login", { account: account, password: password }).then(res => {
        if (res.data.state == "SUCCESS") {
          //返回的是成功
          this.$emit("component", 1);
        } else {
          //返回的是失败，就弹出提示框
          alert(res.data.message);
        }
      });
    },
    register () {
      //注册按钮
      this.$emit("component", 2);
    }
  }
}
</script>

<style scoped>
#login {
  width: 100%;
  height: 785px;
  background-color: rgb(255, 255, 255);
  margin: 0%;
  padding: 0%;
  background-image: url("https://images.wallpaperscraft.com/image/playground_basketball_hoop_art_142155_1920x1080.jpg");
  /* https://images.wallpaperscraft.com/image/city_drawing_colorful_mountains_62074_1920x1080.jpg */
  /* https://images.wallpaperscraft.com/image/playground_basketball_hoop_art_142155_1920x1080.jpg */
  /* https://images.wallpaperscraft.com/image/island_homes_nature_157629_1920x1080.jpg */
  background-repeat: no-repeat;
  background-size: 100% 785px;
}
#register {
  margin-top: 4.5%;
  margin-left: 6%;
  background: none;
  border: none;
  outline: none;
  color: white;
  font-size: 200%;
}
#canves {
  background: rgba(0, 0, 0, 0.582);
  color: white;
  width: 30%;
  height: 50%;
  position: absolute;
  margin-top: 5%;
  margin-left: 35%;
  border-radius: 30px;
}
#mintext {
  font-size: 150%;
  margin-top: 5%;
  margin-left: 5%;
}
#mitext {
  font-size: 150%;
  margin-left: 10%;
}
#account {
  background: none;
  border: none;
  border-bottom: 1px solid white;
  color: white;
  outline: none;
  font-size: 150%;
  margin-top: 15%;
  margin-bottom: 15%;
}
#password {
  background: none;
  border: none;
  color: white;
  font-size: 150%;
  outline: none;
  border-bottom: 1px solid white;
  margin-bottom: 15%;
}
#loginbutton {
  margin-left: 30%;
  width: 40%;
}
</style>